<!DOCTYPE html>
<html lang="en" style="height: 100%">
<head>
    <meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>


${imports}

<script type="text/javascript">
    var dom = document.getElementById('container');
    var myChart = echarts.init(dom, null, {
        renderer: 'canvas',
        useDirtyRect: false
    });
    var app = {};

    var option;

    option = {
        title: {
            text: 'Spring Bean Dependencies'
        },
        tooltip: {
            show: true,
            formatter: function (params) {
                return params.data.des;
            }
        },
        series: [
            {
                type: 'graph', // 图表类型为关系图
                layout: 'force', // 力导向布局
                roam: true,
                symbolSize: 100,
                label: {
                    show: true
                },
                edgeSymbol: ['arrow'],
                lineStyle: {
                    curveness: 0.1
                },
                force: {
                    repulsion: 1000, // 节点之间的推荐力
                    edgeLength: 100 // 边的长度
                },
                categories: ${categories},
                data: ${data},
                links: ${links}
            }
        ]
    };


    if (option && typeof option === 'object') {
        myChart.setOption(option);
    }

    window.addEventListener('resize', myChart.resize);
</script>
</body>
</html>